import { Popup, Toast } from 'antd-mobile'
import React, { useState } from 'react'
import http from '../../../api'
import { CommentParams, CurData } from '../../../pages/CircleDetail'
import Loading from '../Loading'
import style from './index.module.css'

export default function DetailBottomNav(props: { curData: CurData | undefined; requestLove: any; requestDelLove: any; commentParams: CommentParams | undefined; getCommendData: any; replyNum: number; type: string }) {
  const { curData, requestLove, requestDelLove, commentParams, getCommendData, replyNum, type } = props
  const [visible, setVisible] = useState(false)
  const [content, setContent] = useState('')
  async function sendComment() {
    if (content !== '') {
      Toast.show({
        content: '加载中...',
        maskClickable: false,
        duration: 0,
        icon: <Loading />
      })
      setVisible(false)

      const data = await http('post', '/mty/circleReply/add', {
        id: '',
        pid: 0,
        content: content,
        createTime: '',
        love: '',
        ...commentParams,
        senderType: 'c'
      })
      setContent('')
      if (data && data.code === 200) {
        getCommendData()
      }
      Toast.clear()
    }
  }
  return (
    <div className={style['bottom-nav']}>
      <div className={style['nav-item1']}>
        <img src="/static/use/icon-circle-goods-1.png" alt="" />
      </div>
      <div className={style['nav-item2']} onClick={() => setVisible(true)}>
        <img src="/static/use/icon-message-9e9.png" alt="" />
        <div className={style['collect-number']}>{replyNum}</div>
      </div>
      {type === 'comment' && (
        <div className={style['nav-item3']}>
          {curData && curData.collectStatus > 0 ? <img src="/static/use/icon-collect-64-red.png" alt="" onClick={requestDelLove} /> : <img src="/static/use/icon-collect-64-9e9.png" alt="" onClick={requestLove} />}
          {curData && <div style={{ color: curData.collectStatus > 0 ? '#FF5151' : '#9E9E9F' }}>{curData.collectStatus}</div>}
        </div>
      )}
      {type !== 'comment' && (
        <div className={style['nav-item3']}>
          {curData && curData.love > 0 ? <img src="/static/use/icon-collect-64-red.png" alt="" onClick={requestDelLove} /> : <img src="/static/use/icon-collect-64-9e9.png" alt="" onClick={requestLove} />}
          {curData && <div style={{ color: curData.love > 0 ? '#FF5151' : '#9E9E9F' }}>{curData.love}</div>}
        </div>
      )}

      <div className={style['nav-item4']}>
        <div className={style['share-icon']}>
          <img src="/static/use/icon-share-fff.png" alt="" />
        </div>
        <div className={style.text}>分享</div>
      </div>

      <Popup
        visible={visible}
        onMaskClick={() => {
          setVisible(false)
        }}
      >
        <div className={style['comment-box']}>
          <div className={style['comment']}>
            <input type="text" placeholder="和圈友说点什么..." value={content} onChange={(e: any) => setContent(e.target.value)} />
          </div>
          <div className={`${style['send']} ${content !== '' && style['send-comment']}`} onClick={sendComment}>
            发送
          </div>
        </div>
      </Popup>
    </div>
  )
}
